<template>
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/oms/order' }">订单</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- card -->
  <div class="search_container">
    <el-card>
      <div class="search_top">
        <div style="display: flex; align-items: center">
          <el-icon><Search /></el-icon>
          <p>筛选搜索</p>
        </div>
        <span>
          <el-button @click="reactchongzhi">重置</el-button>
          <el-button type="primary" @click="onSearch">查询搜索</el-button>
        </span>
      </div>
      <el-form label-width="140px" class="searchFrom">
        <!-- 1 -->
        <el-form-item label="输入搜索：">
          <el-input
            type="text"
            placeholder="服务单号"
            v-model="form.dataid"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <!-- 2 -->
        <el-form-item label="收货人：">
          <el-input v-model="form.phone" style="width: 203px" />
        </el-form-item>
        <!-- 3 -->
        <el-form-item label="提交时间：" class="time1">
          <el-date-picker
            v-model="time"
            type="date"
            placeholder="请选择时间"
            style="width: 203px"
          />
        </el-form-item>
        <!-- 4 -->
        <el-form-item label="订单状态：">
          <el-select v-model="status" placeholder="全部" style="width: 203px">
            <el-option label="待付款" value="1" />
            <el-option label="待发货" value="2" />
            <el-option label="已发货" value="3" />
            <el-option label="已完成" value="4" />
            <el-option label="已关闭" value="5" />
          </el-select>
        </el-form-item>
        <!-- 5 -->
        <el-form-item label="订单分类：">
          <el-select
            v-model="delivery"
            class="m-2"
            placeholder="全部"
            style="width: 203px"
          >
            <el-option value="正常订单"></el-option>
            <el-option value="秒杀订单"></el-option>
          </el-select>
        </el-form-item>

        <!-- 6 -->
        <el-form-item label="订单来源：">
          <el-select
            v-model="form.hour"
            class="m-2"
            placeholder="全部"
            size="default"
            style="width: 203px"
          >
            <el-option value="PC订单"></el-option>
            <el-option value="App订单"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <!-- table -->
  <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      :border="true"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="num" label="编号" width="120" />
      <el-table-column prop="date" label="原因类型" width="200" />
      <el-table-column prop="name" label="排序" width="200" />
      <el-table-column label="是否可用" width="200">
        <!-- v-model="value" -->
        <el-switch />
      </el-table-column>
      <el-table-column prop="time" label="添加时间" width="200" />
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button>编辑</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页器 -->
  <div style="display: flex; justify-content: space-between; margin-top: 10px">
    <div>
      <el-select
        v-model="delivery"
        class="m-2"
        placeholder="批量发货"
        size="large"
      >
        <el-option value="批量发货"></el-option>
        <el-option value="关闭订单"></el-option>
        <el-option value="删除订单"></el-option>
      </el-select>
      <el-button type="primary" @click="operation" style="margin-left: 20px"
        >确定</el-button
      >
    </div>
    <div>
      <!-- 分页器 -->
      <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import * as api from "../../request/api";
import { Tickets, Search } from "@element-plus/icons-vue";
import useTable from "../../hooks/useTables";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
const time = ref(""); // 提交时间
const delivery = ref(""); // 订单分类
const status = ref(""); // 订单状态
const form = reactive({
  dataid: "", // 输入搜索：服务单号
  phone: "", // 收货人：
  hour: "", // 订单来源：
});

// 查询搜索
let onSearch = () => {
  // 发送请求
  api.order
    .orderlist({
      // dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
      // 注意：time.value在外面没有数据，会为undefined，只能在发送请求里面格式日期
      createTime: dayjs(time.value).format("YYYY-MM-DD"),
      // orderType: delivery.value,
      // receiverKeyword: form.phone,
      // sourceType: form.hour,
      // status: status.value,
    })
    .then((res) => {
      console.log(res);
    });
};

let name = ref("");
let {
  tableData,
  getTableData,
  pagination,
  // handleSizeChange,
  // handleCurrentChange,
} = useTable(api.order.orderlist);

getTableData();

//分页
const handleSizeChange = (val: number) => {
  getTableData();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  getTableData();
  console.log(`current page: ${val}`);
};

// 重置清空
let reactchongzhi = () => {
  time.value = "";
  delivery.value = "";
  status.value = "";
  form.dataid = "";
  form.hour = "";
  form.phone = "";
};
// 确认按钮提交
let operation = () => {
  ElMessage({
    showClose: true,
    message: "请选择要操作的订单",
    type: "warning",
  });
};
</script>

<style lang="scss" scoped>
.search_container {
  left: 0;
  right: 0;
  padding: 20px 35px 20px 0;
  width: 100%;
}

.search_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.searchFrom {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
</style>
